<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-wShop-edit" th:object="${wShop}">
            <input id="shopId" name="shopId" th:field="*{shopId}"  type="hidden">
			<div class="form-group">
				<label class="col-sm-3 control-label">店铺名称：</label>
				<div class="col-sm-8">
					<input id="shopName" name="shopName" th:field="*{shopName}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">省/市：</label>
				<div class="col-sm-8">
					<select data-placeholder="省/市" name="province" id="province"
							class="form-control chosen-select" tabindex="2"
							style="width: 100%"
							onchange="selectCity()">
						<option th:if="${province!=null}" th:value="${province.id}" th:text="${province.name}">省/市</option>
						<option th:value="${province.id}" th:each="province:${provinceList}" th:text="${province.name}">选择省</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">市：</label>
				<div class="col-sm-8">
					<select data-placeholder="市" name="city" id="city"
							class="form-control chosen-select" tabindex="2"
							style="width: 100%"
							onchange="selectCountry()">
						<option th:if="${city!=null}" th:value="${city.id}" th:text="${city.name}">市</option>
						<option th:value="${city.id}" th:each="city:${cityList}" th:text="${city.name}">选择市</option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">区/县：</label>
				<div class="col-sm-8">
					<select data-placeholder="选择区/县" name="country" id="country"
							class="form-control chosen-select" tabindex="2"
							style="width: 100%"
							onchange="selectTown()">
						<option th:if="${country!=null}" th:value="${country.id}" th:text="${country.name}">选择区/县</option>
						<option th:value="${country.id}" th:each="country:${countryList}" th:text="${country.name}">选择区/县</option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">镇/乡/街道：</label>
				<div class="col-sm-8">
					<select data-placeholder="选择镇/乡/街道" name="town" id="town"
							class="form-control chosen-select" tabindex="2"
							style="width: 100%" >
						<option th:if="${town!=null}" th:value="${town.id}" th:text="${town.name}">选择镇/乡/街道</option>
						<option th:value="${town.id}" th:each="town:${townList}" th:text="${town.name}">选择镇/乡/街道</option>
					</select>
				</div>
			</div>
			<div class="select-list" style="margin-left: 100px;margin-top: 10px;width:650px;">
				<ul>
					<li>
						店铺详细地址: <input id="address" name="address" th:field="*{address}" type="text" style="width:150px;" placeholder="如:深圳市桑达雅苑"/>
						<a class="btn btn-primary btn-rounded btn-sm" onclick="theLocation()"><i class="fa fa-search"></i>&nbsp;查询</a>
					</li>
				</ul>
			</div>

			<div id="allmap" style="height:350px;width:400px;margin-left: 100px;margin-top: 10px"></div>

			<div class="form-group" >
				<label class="col-sm-3 control-label">纬度：</label>
				<div class="col-sm-8">
					<input id="locationX" name="locationX" th:field="*{locationX}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">经度：</label>
				<div class="col-sm-8">
					<input id="locationY" name="locationY" th:field="*{locationY}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">描述：</label>
				<div class="col-sm-8">
					<input id="descr" name="descr" th:field="*{descr}" class="form-control" type="text">
				</div>
			</div>
			<!--<div class="form-group">
				<label class="col-sm-3 control-label">状态（0正常 1停用）：</label>
				<div class="col-sm-8">
					<input id="status" name="status" th:field="*{status}" class="form-control" type="text">
				</div>
			</div>-->
			<div class="form-group">
				<label class="col-sm-3 control-label">状态：</label>
				<div class="col-sm-8">
					<div class="onoffswitch">
						<input type="checkbox" th:checked="${wShop.status == '0' ? true : false}" class="onoffswitch-checkbox" id="status" name="status">
						<label class="onoffswitch-label" for="status">
							<span class="onoffswitch-inner"></span>
							<span class="onoffswitch-switch"></span>
						</label>
					</div>
				</div>
			</div>
		</form>
    </div>
    <div th:include="include::footer"></div>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=j6fjyZpbr9YgC3pchimyGbmY"></script>
    <script type="text/javascript">
		var prefix = ctx + "foxwash/wShop";
		$("#form-wShop-edit").validate({
			rules:{
				xxxx:{
					required:true,
				},
			}
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	            //$.operate.save(prefix + "/edit", $('#form-wShop-edit').serialize());
				edit();
	        }
	    }

	    function  edit() {
            var shopId = $("input[name='shopId']").val();
            var shopName = $("input[name='shopName']").val();
            var province = $("#province option:selected").val();
            var city = $("#city option:selected").val();
            var country = $("#country option:selected").val();
            var town = $("#town option:selected").val();
            var address = $("input[name='address']").val();
            var locationX = $("input[name='locationX']").val();
            var locationY = $("input[name='locationY']").val();
            var descr = $("input[name='descr']").val();
            var remark = $("input[name='remark']").val();
            var status = $("input[name='status']").is(':checked') == true ? 0 : 1;
            $.ajax({
                cache : true,
                type : "POST",
                url : prefix + "/edit",
                data : {
                    "shopId":shopId,
                    "shopName": shopName,
                    "province": province,
                    "city": city,
                    "country": country,
                    "town": town,
                    "address": address,
                    "locationX": locationX,
                    "locationY": locationY,
                    "descr": descr,
                    "remark": remark,
                    "status": status
                },
                async : false,
                error : function(request) {
                    $.modal.alertError("系统错误");
                },
                success : function(data) {
                    $.operate.successCallback(data);
                }
            });
        }

        function selectCity(){
            var province = $("#province option:selected").val();
            $.ajax({
                url : prefix+"/updateCity",
                type : "post",
                data : {
                    'province' : province
                },
                success : function(data) {
                    var data2 = eval(data.cityList);
                    if(data2 != null && data2.length > 0) {
                        var html="";
                        for (var i in data2) {
                            html+="<option value='"+data2[i].id+"'>"+data2[i].name+"</option>";
                        }
                    }
                    $("#city").html(html).selectpicker('refresh');
                }
            });
        }

        function selectCountry(){
            var city = $("#city option:selected").val();
            $.ajax({
                url : prefix+"/updateCountry",
                type : "post",
                data : {
                    'city' : city
                },
                success : function(data) {
                    var data2 = eval(data.countryList);
                    if(data2 != null && data2.length > 0) {
                        var html="";
                        for (var i in data2) {
                            html+="<option value='"+data2[i].id+"'>"+data2[i].name+"</option>";
                        }
                    }
                    $("#country").html(html).selectpicker('refresh');
                }
            });
        }

        function selectTown(){
            var country = $("#country option:selected").val();
            $.ajax({
                url : prefix+"/updateTown",
                type : "post",
                data : {
                    'country' : country
                },
                success : function(data) {
                    var data2 = eval(data.townList);
                    if(data2 != null && data2.length > 0) {
                        var html="";
                        for (var i in data2) {
                            html+="<option value='"+data2[i].id+"'>"+data2[i].name+"</option>";
                        }
                    }
                    $("#town").html(html).selectpicker('refresh');
                }
            });
        }

        var map = new BMap.Map("allmap");
        var pointA = new BMap.Point(116.331398,39.897445);
        map.centerAndZoom(pointA,9);
        var marker;
        var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
        var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
        map.addControl(top_left_control);
        map.addControl(top_left_navigation);
        // 创建地址解析器实例
        var myGeo = new BMap.Geocoder();
		addre();
        function theLocation() {
            addre();
        }

        function addre() {
            var province = $("#province option:selected").text();
            var city = $("#city option:selected").text();
            var country = $("#country option:selected").text();
            var town = $("#town option:selected").text();
            var address = $("input[name='address']").val();
            var addr = province+city+country+town+address;

            if(addr!=""){
                myGeo.getPoint(addr,function (point) {
                    if(point){
                        map.centerAndZoom(point, 18);
                        pointA = new BMap.Point(point.lng,point.lat);
                        $("#locationX").val(point.lat);
                        $("#locationY").val(point.lng);
                        marker = new BMap.Marker(pointA);
                        map.addOverlay(marker);
                        marker.enableDragging();

                        marker.addEventListener("dragend",function (e) {
                            pointA = new BMap.Point( e.point.lng,e.point.lat);
                            $("#locationX").val(e.point.lat);
                            $("#locationY").val(e.point.lng);
                        });
                    }else {
                        alert("您选择地址没有解析到结果!");
                    }
                })
            }
        }
	</script>
</body>
</html>
